<template>
	<view class="layer">
		<IndexHead :config="navConfig"/>
		
		<view class="xiangQing">
			<view class="xqOne">
				<text>┃</text><i>发票详情</i>
			</view>
			<view class="xqTwo">
				<p>电子发票与纸质发票具有同等法律效力，可支持报销入账，</p>
				<p>建议使用<i>电子发票.</i></p>
			</view>
		</view>
		
		<!-- 表单 -->
		<view class="biaodan">
			<form action="">
				<label class="label1" for="">发票类型</label>
				<view class="FPleixing">
					<label class="radio" >
						<radio value="r1" color="#54B1FF" style="transform:scale(0.7)" />电子发票
					</label>
					<label class="radio">
						<radio value="r2" checked="true" color="#54B1FF" style="transform:scale(0.7)" />纸质发票
					</label>
				</view>
				<!-- <view class="zzfp"><text>纸质发票</text></view> -->
				<hr>
				<label class="label1" for="">发票抬头</label>
				<view class="two">抬头名称</view><br>
				<hr>
				<label class="label1" for="">税号</label>
				<view class="three">税号</view><br>
				<hr>
				<label class="label1" for="">更多信息</label>
				<view class="four">辽宁省沈阳市</view><br>
				<hr>
				<label class="label1" for="">手机号码</label>
				<view class="five">1392#333333</view><br>
				<hr>
				<label for="">发票金额</label><p>488.00元</p>
			</form>
			
		</view>
		
		<view class="jieshou">
			<view class="jsfs">
				<text>┃</text><i>接收方式</i>
			</view>
			<view class="biaodan2">
			<form action="">
				<label for="">收件人</label>
				<view class="input">张蕾</view><br>
				<hr>
				<label for="">联系电话</label>
				<view class="input">13923459876</view><br>
				<hr>
				<label for="">选择地址</label>
				<view class="input">辽宁省沈阳市</view>
			</form>
			</view>
		</view>
		
		<view class="btn">
			<view class="btn1"><navigator url="">取消申请</navigator></view>
			<view class="btn2"><navigator url="../invoiceSQZ/shenQingZhong">确认提交</navigator></view>
		</view>
		
	</view>
</template>

<script>
	export default{
			data(){
				return{
					navConfig:{
						backgroundColor: 'transparent',
						color: '#fff',
						common:{
							hasSearch:false,
							hasMenu:false,
							hasTitle:true,
							minHead:true,
						},
						left: {
							img:'',
							text:'',
						},
						mid:{
							title:'申请发票',
							hasSearchMid:false
						},
						right:{
							
						}
					},
					curTabIndex: 0,
				}
			},
			
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 100%;
		background-color: #fff;
	}
	
	

/* 详情 */
	.xiangQing{
		width: 690upx;
	}
	
	.xqOne{
		width: 750upx;
	}
	
	.xqOne text{
		font-size: 28upx;
		width: 5upx;
		margin-left: 32upx;
		color: #54B0FF;
	}
	
	.xiangQing i{
		font-size: 28upx;
		margin-left: 15upx;
	}
	
	.xqTwo{
		width: 671upx;
		height: 59upx;
		line-height: 30upx;
	}
	
	.xqTwo p{
		width: 671upx;
		height:30upx;
		color: #CFCFCF;
		font-size: 24upx;
		margin-left: 60upx;
		margin-right: 31upx;
		float: left;
		/* padding: 15upx; */
	}
	
	.xqTwo i{
		font-size: 24upx;
		color: #54B0FF;
		margin-left: 1upx;
	}

/* 表单 */
.biaodan{
	width: 690upx;
	height: 550upx;
	box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
	margin-left: 30upx;
	margin-top: 50upx;
}

.biaodan label{
	float: left;
	width: 120upx;
	height: 26upx;
	opacity: 1;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: rgba(51,51,51,1);
	margin-left: 42upx;
	margin-top: 33upx;
}
.biaodan>view{
	display: block;
}
.biaodan .FPleixing{
	float: left;
	margin-left: 109upx;
	width: 420upx;
	height: 26upx;
	font-size: 26upx;
	font-family: PingFang SC Regular;
	color: rgba(51,51,51,1);
	margin-top: 37upx;
	margin-left: 105upx;
	margin-bottom: 30upx;
}
.biaodan .radio{
	width: 200upx;
	margin-left: -20upx; 
	margin-top: -5upx;
}


.table1 .label1{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 34upx;
		float: left;
	}
	.biaodan .one{  
		margin-left: 90upx;
		margin-top: 24upx;
		width: 266upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	.biaodan hr{
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 40upx;
	}
	.biaodan .two{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		float: left;
	}
	.biaodan .three{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		float: left;
	}
	.biaodan .four{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		float: left;
	}
	.biaodan .five{
		margin-left: 90upx;
		margin-top: 28upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		float: left;
	}

.biaodan p{
	font-size: 28upx;
	width: 118upx;
	height: 25upx;
	opacity: 1;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: rgba(255,197,140,1);
	float: left;
	margin-top: 33upx;
	margin-left: 99upx;
}

/* 表单2 */

.jsfs{
	width: 750upx;
	height: 61upx;
	float: none;
	margin-top: 50upx;
}

.jsfs text{
	font-size: 28upx;
	width: 5upx;
	margin-left: 32upx;
	color: #54B0FF;
}

.jsfs i{
		font-size: 28upx;
		margin-left: 15upx;
	}
.biaodan2{
	width: 690upx;
	height: 350upx;
	box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
	margin-left: 30upx;
	margin-top: 20upx;
}

.biaodan2 label{
	width: 120upx;
	height: 26upx;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: #333333;
	margin-left: 52upx;
	margin-top: 64upx;
	float: left;
}

.biaodan2 .input{
	margin-left: 90upx;
	margin-top: 60upx;
	width: 280upx;
	height: 26upx;
	font-size: 28upx;
	font-family: PingFang SC Regular;
	color: #333333;
	float: left;
}
.biaodan2 hr{
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 40upx;
	}

/* 按钮 */
.btn>view{display: inline-block;}
.btn1{
	width:240upx;
	height: 72upx;
	background: #E6E6E6;
	font-size: 20upx;
	line-height: 72upx;
	border-radius: 35upx;
	/* margin-left: 3.64rem;
	margin-top: 0.26rem; */
	border:1px solid #FFFFFF;
	text-align: center;
	margin-top: 106upx;
	margin-left: 90upx;
	margin-bottom: 30upx;
}

.btn1 navigator{
	margin: auto;
	width: 70%;
	height: 0.25rem;
	font-size: 26upx;
	font-family: PingFang SC Regular;
	color: #FFFFFF;
}

.btn2{
	width:240upx;
	height: 72upx;
	font-size: 20upx;
	line-height: 72upx;
	border-radius: 35upx;
	/* margin-left: 3.64rem;
	margin-top: 0.26rem; */
	border:1px solid #FFFFFF;
	text-align: center;
	margin-left: 90upx;
	background-image: linear-gradient(to right, #54B0FF,#577AFF);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='##577AFF', endColorstr='#54B0FF', GradientType=1); 
}

.btn2 navigator{
	margin: auto;
	width: 70%;
	height: 0.25rem;
	font-size: 26upx;
	font-family: PingFang SC Regular;
	color:#FFFFFF;
}
</style>
